<template>
  <div class="plan">
    <van-nav-bar left-text="计划">
      <template #right>
        <van-icon name="edit" size="22" />
      </template>
    </van-nav-bar>

    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="" style="width: 100%; height: 175px" />
      </van-swipe-item>
    </van-swipe>

    <!-- 训练课程 -->
    <div class="course">
      <h3>训练课程</h3>
      <van-sticky>
        <van-tabs v-model="week" @click="planCourse">
          <van-tab
            v-for="(item, i) in weekName"
            :key="i"
            :title="`周${item.week}`"
            :name="item.id"
          >
          </van-tab>
        </van-tabs>
      </van-sticky>

      <van-pull-refresh
        success-text="加载完成"
        :success-duration="1500"
        v-model="refreshing"
      >
        <van-list finished-text="我是有底线的">
          <div class="box" v-for="item in plans" :key="item.pid" @click="$router.push(`/index/detail/${item.pid}`)">
            <img :src="base + item.pic" alt="" />
            <div>
              <div class="title">
                <p>{{ item.title }}</p>
                <p>{{ item.duration }}分钟</p>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
import { base } from "@/service";
import storage from "@/utils/Storage";

export default {
  data() {
    return {
      images: [],
      tabsName: "b",
      week: "1",
      weekName: [],
      base,
      plans: [],
      refreshing: false,
      arr: [],
    };
  },
  methods: {
    planLb() {
      httpApi.activityApi.activitySwiper().then((res) => {
        console.log(res.data.data);
        let arr = [];
        res.data.data.forEach((el) => {
          arr.push(`${base + el.pic}`);
        });
        console.log(arr);
        this.images = arr;
      });
    },
    planCourse(id) {
      httpApi.myPlanApi
        .planWeekCourse({ week_id: id, uid: storage.get(storage.KEY_USER).uid })
        .then((res) => {
          console.log("个人计划", res);
          this.plans = res.data.data;
        });
    },
    PlanList() {
      httpApi.myPlanApi.planWeek().then((res) => {
        console.log("周", res);

        let arr = ["一", "二", "三", "四", "五", "六", "日"];
        res.data.data.forEach((val) => {
          this.weekName.push({ id: val.id, week: arr[val.week - 1] });
        });
      });
    },
  },
  mounted() {
    this.planLb();
    this.planCourse(1);
    this.PlanList();
  },
};
</script>

<style lang="scss">
.plan {
  .van-nav-bar__text {
    color: #000;
    font-size: 22px;
    font-weight: bold;
  }

  .van-nav-bar .van-icon {
    color: #000;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .course {
    h3 {
      padding: 2vh;
    }

    .van-tabs__wrap--scrollable .van-tab {
      padding: 0 10px;
    }

    .van-tab__pane,
    .van-tab__pane-wrapper {
      padding: 2vh;
    }

    .box {
      position: relative;
      width: 92%;
      height: 20vh;
      margin: 1vh auto;

      > div {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .coach {
        display: flex;
        padding: 10px 10px;
        align-items: center;

        img {
          width: 30px;
          margin-right: 10px;
          border-radius: 50%;
        }
      }

      .title {
        margin: 40px 0 0 10px;
        p{
          color: #fff;
        }
      }
    }
  }
}
.card .card-1 b, p{
  font-size: 16px;
}
</style>
<style>
* {
  padding: 0;
  margin: 0;
}

img {
  display: block;
}
</style>
